<template>
	<view class="page">
		<image :src="config.apply_background" style="width: 100%;display: block;position: fixed;bottom: 0;right: 0;"
			mode="widthFix"></image>
		<view style="position: relative;z-index: 2;">
			<image :src="config.apply_banner" style="width: 100%;display: block;" mode="widthFix"></image>
			<view class="p15">

				<view class="module-block brs8 p15">



					<view class="bg-block fz16 bm pb15 mb15 u-flex">

						<view class="item-addon c0"><span class="xing">*</span>姓名</view>
						<view class="pl10">
							<input v-model="post.name" style="padding: 0;" type="text" placeholder="请填写姓名" />
						</view>
					</view>

					<view class="bg-block fz16 bm pb15 mb15 u-flex">

						<view class="item-addon c0"><span class="xing">*</span>联系电话</view>
						<view class="pl10">
							<input v-model="post.phone" style="padding: 0;" type="text" placeholder="请填写联系电话" />
						</view>
					</view>
					<view class="bg-block fz16 bm pb15 mb15 u-flex">

						<view class="item-addon c0"><span class="xing">*</span>邮寄地址</view>
						<view class="pl10">
							<input v-model="post.address" style="padding: 0;" type="text" placeholder="请填写邮寄地址" />
						</view>
					</view>
					<view class="bg-block fz16 bm pb15 mb15 u-flex"
						@click="pupopList=cateList,pupopType='identity',pupopShow=true">

						<view class="item-addon c0"><span class="xing">*</span>身份选择</view>
						<view class="pl10" style="position: relative;">
							<view class="bg-select"></view>
							<input style="padding: 0;" v-model="post.identity" disabled type="text"
								placeholder="请选择身份选择" />
						</view>
					</view>


					<view class="bg-block fz16 bm pb15 mb15 u-flex"
						@click="pupopList=timeList,pupopType='year',pupopShow=true">

						<view class="item-addon c0"><span class="xing">*</span>我的少年宫岁月</view>
						<view class="pl10" style="position: relative;">
							<view class="bg-select"></view>
							<input style="padding: 0;" v-model="post.year" disabled type="text" placeholder="请选择时间区间" />
						</view>
					</view>

					<view class="bg-block fz16 bm pb15 mb15">

						<view class="item-addon c0"><span class="xing">*</span>是否愿意参加周年庆当晚的篝火晚会</view>
						<view class="mt10">

							<u-radio-group v-model="post.is_soiree">
								<u-radio name="是">
									是
								</u-radio>
								<u-radio name="否">
									否
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>









			</view>

			<view class="p15">

				<view class="module-block brs8 p15">

					<view class="fz16 u-font-bold mb10 u-flex u-f-jsb">一、征文
						<view class="btn-add" @click="uploadFile">点击上传</view>
					</view>
					<view class="fz12 c9 mb15">
						我与少年宫的故事，与少年宫相关的征文、诗歌、日记或者回忆录等，体裁不限。可记录您在少年宫学习的课程、参加的活动、结识的朋友，或少年宫对个人成长的影响等。格式：txt、docx、doc
					</view>
					<view v-if="post.article" class="mb15 u-f-justify">

						<a :href="post.article">{{post.article}}</a><u-icon size="40" name="close-circle-fill"
							@click="post.article=''" style="color: orangered;"></u-icon>
					</view>
					<!-- <view class="u-f-justify">
						<view class="btn-add" @click="uploadFile">点击上传</view>
					</view> -->

				</view>
				<view class="module-block brs8 p15 mt20">


					<view class="fz16 u-font-bold mb10 u-flex u-f-jsb">
						二、照片

						<view class="btn-add" @click="uploadImage">点击上传</view>
					</view>

					<view>
						<view class="fz12 c9 mb15">
							
上传jpg、jpeg、png格式照片，最多不超过9张，大小≤10M
						</view>
						<view class="u-flex mb15" style="position: relative;" v-for="(item,index) in post.image"
							:key="index">

							<image :src="item.url"
								style="width: 150rpx;height: 150rpx;min-width: 150rpx;margin-right: 10px;background: #f5f5f5;"
								mode="aspectFill">
							</image>
							<textarea maxlength="30"
								style="min-height:110rpx;font-size:24rpx;line-height: 38rpx;border: 1px solid #ddd;border-radius: 10rpx;padding: 20rpx;"
								v-model="item.text" auto-height placeholder="包含人物、时间、地点、事件 不超过30字" />
							<u-icon style="position: absolute;z-index: 5;left: -10px;color: orangered;top: 0;" size="40"
								name="close-circle-fill" @click="toDel('image',index)"></u-icon>
						</view>
					</view>



				</view>
				<view class="module-block brs8 p15 mt20">

					<view class="fz16 u-font-bold mb10 u-flex u-f-jsb">
						三、视频

						<view class="btn-add" @click="uploadVideo">点击上传</view>
					</view>
					<view class="fz12 c9 mb15">
						上传mp4格式文件，大小不超过500M，数量不超过2个
					</view>

					<view>
						<view class="u-flex mb15" style="position: relative;" v-for="(item,index) in post.video"
							:key="index">
							<video :src="item.url"
								style="width: 150rpx;min-width: 150rpx;height: 150rpx;margin-right: 10px" controls>
							</video>

							<textarea maxlength="30"
								style="min-height:110rpx;font-size:24rpx;line-height: 38rpx;border: 1px solid #ddd;border-radius: 10rpx;padding: 20rpx;"
								v-model="item.text" auto-height placeholder="包含人物、时间、地点、事件 不超过30字" />
							<u-icon style="position: absolute;z-index: 5;left: -10px;color: orangered;top: 0;" size="40"
								name="close-circle-fill" @click="toDel('video',index)"></u-icon>
						</view>
					</view>



				</view>

				<view class="module-block brs8 p15 mt20">

					<view class="fz16 u-font-bold mb10 u-flex u-f-jsb">
						四、音频

						<view class="btn-add" @click="uploadMusic">点击上传</view>
					</view>
					<view class="fz12 c9 mb15">
						上传mp3格式文件
					</view>


					<view>

						<view class="u-flex" style="flex-wrap: wrap;">
							<view class="mr10" style="position: relative;" v-for="(item,index) in post.music"
								:key="index">

								<audio :src="item"></audio>
								<u-icon style="position: absolute;z-index: 5;right: 0;top:0;color: orangered;" size="40"
									name="close-circle-fill" @click="toDel('music',index)"></u-icon>
							</view>
						</view>
						<view class="bg-block fz16 pb15 mb15 mt20" v-if="post.music.length>0">
							<view>
								<textarea maxlength="30" style="min-height:40px;font-size:26rpx;"
									v-model="post.music_synopsis" auto-height placeholder="包含人物、时间、地点、事件 不超过30字" />
							</view>
						</view>
					</view>


				</view>




			</view>



			<view class="module-btn p15">
				<view class="btn" @click="toAdd">提交</view>
			</view>
			<u-picker mode="time" v-model="showDate" :params="params" @confirm="dateConfirm"></u-picker>
			<!-- 弹窗选择 -->
			<u-picker mode="selector" range-key="label" @confirm="popupConfirm" v-model="pupopShow"
				:range="pupopList"></u-picker>
			<!-- 弹窗选择 -->


		</view>


	</view>
</template>

<script>
	let oos = require('../../common/oos-js-sdk.js')
	// import AWS from 'aws-sdk';
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				showTips: false,
				cateList: [{
					label: '学员/学员家长'
				}, {
					label: '教职工'
				}, {
					label: '热心市民'
				}, ],
				timeList: [],
				isAgree: false,
				activity: {},
				defaultIndex: [0, 0, 0],
				show: false,
				isTop: false,
				allSupplier: [],
				cityList: [],
				workCategoryList: [],
				workGroupList: [],
				nationalityList: [],
				// 基础数据
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showDate: false,
				pupopShow: false,
				pupopType: 'certificate_type',
				pupopList: [],
				modelList: [],
				colorList: [],
				sexList: [],
				client: {},
				config: {},
				post: {
					name: '',
					phone: '',
					address: '',
					identity: '',
					year: '',
					is_soiree: '',
					article: '',
					article_synopsis: '',
					image: [],
					image_synopsis: '',
					video: [],
					video_synopsis: '',
					music: [],
					music_synopsis: '',
				},
			}
		},
		onLoad(e) {

			this.$api.config({}, res => {
				if (res.code) {
					this.config = res.data
				}
			})

			this.timeList = []
			for (let i = 1956; i < 2026; i += 10) {
				let item = {
					label: `${i}-${i+10}`
				}
				this.timeList.push(item)
			}
			this.$nextTick(() => {
				this.initOss()
			})
		},
		onShow() {

		},
		methods: {
			toDel(type, idx) {
				this.post[type].splice(idx, 1)
			},
			uploadMusic() {


				if (this.post.music.length >= 1) {
					this.$common.errorToShow('最多上传一个音频！')
					return
				}
				uni.chooseFile({
					extension: ['.mp3'],
					success: async (chooseImageRes) => {
						console.log(chooseImageRes, 121212)
						const tempFilePaths = chooseImageRes.tempFiles[0];
						let url = await this.handleUpload(tempFilePaths,['mp3'],'请选择mp3文件')
						this.post.music.push(url)
					}
				});
			},
			uploadFile() {
				uni.chooseFile({
					extension: ['.doc', '.txt', '.docx'],
					success: async (chooseImageRes) => {
						console.log(chooseImageRes, 121212)
						const tempFilePaths = chooseImageRes.tempFiles[0];
						let url = await this.handleUpload(tempFilePaths,['txt','docx','doc'],'请选择txt、docx、doc文件')
						this.post.article = url
					}
				});
			},
			uploadImage() {


				if (this.post.image.length >= 9) {
					this.$common.errorToShow('最多上传9张图片！')
					return
				}
				let isText = false
				this.post.image.some((item) => {
					if (!item.text) {
						isText = true
					}
				})
				if (isText) {
					this.$common.errorToShow('请填写图片简介！')
					return

				}
				uni.chooseImage({
					success: async (chooseImageRes) => {
						console.log(chooseImageRes, 121212)
						const tempFilePaths = chooseImageRes.tempFiles[0];
						let url = await this.handleUpload(tempFilePaths,['jpg','jpeg','png'],'请选择jpg、jpeg、png文件')
						let item = {
							url: url,
							text: ''
						}
						this.post.image.push(item)
					}
				});
			},
			uploadVideo() {
				if (this.post.video.length >= 2) {
					this.$common.errorToShow('最多上传2个视频！')
					return
				}
				let isText = false
				this.post.video.some((item) => {
					if (!item.text) {
						isText = true
					}
				})
				if (isText) {
					this.$common.errorToShow('请填写视频简介！')
					return

				}

				uni.chooseVideo({
					success: async (chooseImageRes) => {
						console.log(chooseImageRes, 121212)
						const tempFilePaths = chooseImageRes.tempFile;
						let url = await this.handleUpload(tempFilePaths,['mp4'],'请选择mp4文件')

						let item = {
							url: url,
							text: ''
						}
						this.post.video.push(item)
					}
				});
			},
			getFileExtension(filename) {
			    return filename.split('.').pop(); // 使用pop()获取数组的最后一个元素
			},
			handleUpload(file,attr,tips) {
				uni.showLoading()
				return new Promise((resolve, reject) => {
					let that = this
					if(attr.indexOf(this.getFileExtension(file.name)) == -1){
						
							this.$common.errorToShow(tips)
						return
					}
					// +file.name
					console.log(this.getFileExtension(file.name),1111)
					let key=new Date().getTime()+ String(Math.floor(Math.random() * 100000000))+'.'+this.getFileExtension(file.name)
					var params = {
						Body: file,
						Bucket: 'sng-image',
						Key: key
					}
					console.log(params, 1122222)
					that.client.putObject(params, function(err, data) {
						if (err) {
							console.log(err, 11222222) // an error occurred

							uni.hideLoading()
							resolve(false)
						} else {
							uni.hideLoading()
							let response = 'https://oos-cn.ctyunapi.cn/' + params.Bucket + '/' + params.Key
							// that.isInternal = false
							resolve(response)
						}
					})
				})
			},
			initOss() {
				this.client = new OOS.S3({
					accessKeyId: '32b85ea82c9337d1ff26',
					secretAccessKey: '8f7a4fe2861693f9ef439c8250c67190824ccba4',
					endpoint: 'oos-cn.ctyunapi.cn',
					signatureVersion: 'v4',
					apiVersion: '2006-03-01',
					s3ForcePathStyle: true,
				});
				console.log(this.client, 99999)
			},
			// 省市区联动初始化
			showThreePicker() {
				this.show = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.post.areaName = e[0].name + "-" + e[1].name
				this.post.province = e[0].id
				this.post.city = e[1].id
			},
			popupConfirm(e) {
				let idx = e[0]
				this.post[this.pupopType] = this.pupopList[idx].label
				if (this.pupopType == 'work_category_id' || this.pupopType == 'work_group_id') {

					this.post[this.pupopType] = this.pupopList[idx].id

					this.post[this.pupopType + 'Name'] = this.pupopList[idx].label
				}
			},
			toAdd() {
				let post = JSON.parse(JSON.stringify(this.post))
				post.image = []
				post.image_synopsis = []
				post.video = []
				post.video_synopsis = []
				this.post.image.some(item => {
					post.image.push(item.url)
					post.image_synopsis.push(item.text)
				})
				this.post.video.some(item => {
					post.video.push(item.url)
					post.video_synopsis.push(item.text)
				})

				this.$api.apply(post, res => {
					if (res.code) {
						this.$common.successToShow('提交成功', () => {
							window.location.reload()
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-add {

		background: #4CA8E7;
		color: #fff;
		font-size: 12px;
		padding: 14rpx 24rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.btn {
		background: #4CA8E7;
		color: #fff;
		font-size: 15px;
		padding: 26rpx;
		width: 100%;
		text-align: center;
		border-radius: 50rpx;
	}

	.module-btn {}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.btn-img {
		border: 1px dashed #ccc;
		border-radius: 10rpx;
		width: 150rpx;
		height: 150rpx;
		display: flex;
		font-size: 30rpx;
		align-items: center;
		justify-content: center;
	}

	.module-block {
		background: #f2f6ff;
	}

	.bg-select {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 5;
	}

	.xing {
		color: red;
		margin-right: 2px;
	}

	.item-addon {
		min-width: 60px;
	}
</style>